SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Tiled web map</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Tiled web map</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style>

<p>A <b>tiled web map</b> or <b>tile map</b> (also known as <b>slippy map</b><sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> in <a href="OpenStreetMap" title="OpenStreetMap">OpenStreetMap</a>), is a <a href="Web_map" class="mw-redirect" title="Web map">web map</a> displayed by seamlessly joining dozens of individually requested data files, called "tiles". It is the most popular way to display and navigate maps, replacing other methods such as <a href="Web_Map_Service" title="Web Map Service">Web Map Service</a> (WMS) which typically display a single large image, with arrow buttons to navigate to nearby areas. <a href="Google_Maps" title="Google Maps">Google Maps</a> was one of the first major mapping sites to use this technique. The first tiled web maps used <a href="Raster_graphics" title="Raster graphics">raster</a> tiles, before the emergence of <a href="Vector_tiles" title="Vector tiles">vector tiles</a>.

</p><p>There are several advantages to tiled maps. Each time the user pans, most of the tiles are still relevant, and can be kept displayed, while new tiles are fetched. This greatly improves the user experience, compared to fetching a single map image for the whole viewport. It also allows individual tiles to be pre-computed, a task easy to parallelize. Also, displaying rendered images served from a web server is less computationally demanding than rendering images in the browser, a benefit over technologies such as <a href="Web_Feature_Service" title="Web Feature Service">Web Feature Service</a> (WFS). While many map tiles are in raster format (a bitmap file such as <a href="Portable_Network_Graphics" class="mw-redirect" title="Portable Network Graphics">PNG</a> or <a href="JPEG" title="JPEG">JPEG</a>), the number of suppliers of vector tiles is growing. Vector tiles are rendered by the client browser, which can thus add a custom style to the map. Vector map tiles may also be rotated separately from any text overlay so that the text remains readable.

</p>

<div class="mw-heading mw-heading2"><h2 id="Defining_a_tiled_web_map">Defining a tiled web map</h2></div>

<p>Properties of tiled web maps that require convention or standards include the size of tiles, the numbering of zoom levels, the projection to use, the way individual tiles are numbered or otherwise identified, and the method for requesting them.

</p><p>Most tiled web maps follow certain Google Maps conventions:

</p>

<ul><li>Tiles are 256x256 pixels</li>

<li>At the outer most zoom level, 0, the entire world can be rendered in a single map tile.</li>

<li>Each zoom level doubles in both dimensions, so a single tile is replaced by 4 tiles when zooming in. This means that about 22 zoom levels are sufficient for most practical purposes.</li>

<li>The <a href="Web_Mercator" class="mw-redirect" title="Web Mercator">Web Mercator</a> projection is used, with latitude limits of around 85 degrees.</li></ul>

<p>The de facto OpenStreetMap standard, known as Slippy Map Tilenames<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> or XYZ,<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> follows these and adds more:

</p>

<ul><li>An X and Y numbering scheme</li>

<li><a href="Portable_Network_Graphics" class="mw-redirect" title="Portable Network Graphics">PNG</a> images for tiles</li>

<li>Images are served through a <a href="Web_server" title="Web server">Web server</a>, with a URL like <code>http://.../Z/X/Y.png</code>, where Z is the zoom level, and X and Y identify the tile.</li></ul>

<div class="mw-heading mw-heading3"><h3 id="Tile_numbering_schemes">Tile numbering schemes</h3></div>

<p>There are three main numbering schemes in use:<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>

</p>

<ul><li>Google Maps / OpenStreetMap: (0 to 2<sup>zoom</sup>-1, 0 to 2<sup>zoom</sup>-1) for the range (−180, +85.0511) - (+180, −85.0511)</li>

<li>Tile Map Service: (0 to 2<sup>zoom</sup>-1, 2<sup>zoom</sup>-1 to 0) for the range (−180, +85.0511) - (+180, −85.0511). (That is, the same as the previous with the Y value flipped.)</li>

<li><a href="Quadtree" title="Quadtree">QuadTrees</a>, used by Microsoft.</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Standards">Standards</h2></div>

<p>Several standards exist:

</p>

<ul><li><a href="Tile_Map_Service" title="Tile Map Service">Tile Map Service</a>: an early standard supported by <a href="OpenLayers" title="OpenLayers">OpenLayers</a>. One difference is the y axis is positive northwards in TMS, and southwards in OpenStreetMap.</li>

<li><a href="Web_Map_Tile_Service" title="Web Map Tile Service">Web Map Tile Service</a>: a more recent <a href="Open_Geospatial_Consortium" title="Open Geospatial Consortium">Open Geospatial Consortium</a> (OGC) standard.</li>

<li>The de facto XYZ standard referred to above.</li>

<li>TileJSON: a lightweight <a href="JSON" title="JSON">JSON</a> description of all the parameters associated with a web map, created by <a href="Mapbox" title="Mapbox">Mapbox</a>.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup></li>

<li>Bing Maps Tile System,<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> using Quadkeys for addressing.</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Client_libraries">Client libraries</h2></div>

<p>To display a tiled map in a browser usually requires the support of a <a href="Web_mapping" title="Web mapping">web mapping</a> framework. This framework handles the retrieval of tiles, display, caching, and user navigation. Popular frameworks for tiled maps include <a href="Google_Maps_API" class="mw-redirect" title="Google Maps API">Google Maps API</a>, <a href="OpenLayers" title="OpenLayers">OpenLayers</a> and <a href="Leaflet_(software)" title="Leaflet (software)">Leaflet</a>.

</p>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://wiki.openstreetmap.org/wiki/Slippy_Map">"OpenStreetMap wiki"</a>.</cite></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames">"Slippy map tilenames - OpenStreetMap Wiki"</a>. <i>wiki.openstreetmap.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2015-06-10</span></span>.</cite></span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://gist.github.com/tmcw/4954720">"tmcw/xyz_vs_tms.md"</a>. <i>GitHub Gists</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2015-06-10</span></span>.</cite></span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/">"Tiles à la Google Maps: Coordinates, Tile Bounds and Projection - conversion to EPSG:900913 (EPSG:3785) and EPSG:4326 (WGS84)"</a>. <i>www.maptiler.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2022-03-01</span></span>.</cite></span>

</li>

<li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.mapbox.com/help/an-open-platform/#tilejson">"An Open Platform: TileJSON"</a>. <i>mapbox.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2017-01-05</span></span>.</cite></span>

</li>

<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://msdn.microsoft.com/en-us/library/bb259689.aspx">"Bing Maps Tile System"</a>. <i>msdn.microsoft.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2015-06-10</span></span>.</cite></span>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.mapbox.com/foundations/how-web-maps-work/">"How do Web Maps Work?"</a>. Mapbox.</cite></li>

<li><a rel="nofollow" class="external text" href="http://marineplan.com/online-waterkaart/">Example of a tiled marine map for boating</a></li></ul></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-03-19" href="https://en.wikipedia.org/wiki/?title=Tiled_web_map&oldid=1281241988">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>